<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <link rel="icon" href="http://shcdn.iceinto.com/img/ico/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="http://shcdn.iceinto.com/img/ico/shortcut_favicon.ico" type="image/x-icon">
    <title>Css3 常用方式</title>
    <style type="text/css">

        html, body,#content {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }

        body {
            background-color: #FFEFD5;
        }

        .con {
            margin-top: 30%;
            padding: 20px 0;
            width: 100%;
            background-color: #00aced;
            border-radius: 5px;;
        }

        #txtContent{
            border-radius: 2px;
            border: 0;
            background-color: white;
            width: 65%;
        }
        .btnEnd {
            margin-top: 10px;;
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 6px 12%;
            width: 76%;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="con">
        输入加密数据：<input type="text" id="txtContent" value="测试数据"><br/>
        <a href="javascript:;" class="btnEnd">点击加密</a>

        <p>加密后：<span class="txtShow"></span></p>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $('.btnEnd').click(function () {
        var txtvalue = $('#txtContent').val();
        $.getJSON('http://m.sh.189.cn/service/node/crypto?data=' + txtvalue + '&key=key&type=0', function (data) {
            $('.txtShow').html(data.data);
        })

    });
</script>
</html>